<template>
  <div v-loading="loading">
    <Ttitle
      class="title"
      @commit="commit"
      @NowTime="NowTime"
      :isJJ="isjiaojuan"
      :isdisabled="disabled"
      @commitPage="commitPage"
      :usererror="usererror"
    ></Ttitle>
    <div style="height: 50px"></div>
    <div class="big_box">
      <div class="big_box_left">
        <div style="height: calc(100% - 50px); overflow: auto">
          <div v-for="(ti, index) in TiType" :key="index + 1000000">
            <div style="padding: 0 24px; display: flex" v-if="ti.length != 0">
              <span class="TI_title"
                >{{ ti[0].sum }}、{{ ti[0].qtype }}题
                <span v-if="!jrType"
                  >（共{{
                    getExectSettingData.试题分布[ti[0].qtype].数量
                  }}题，每题{{
                    getExectSettingData.试题分布[ti[0].qtype].分数
                  }}分，说明：{{
                    ti[0].qtype != "多选"
                      ? "选择一项正确答案"
                      : "选择所有正确的答案"
                  }}）</span
                >
                <span
                  v-else
                  style="
                    flex: 1;
                    text-align: right;
                    color: #fa6400;
                    font-weight: 600;
                  "
                >
                  {{ ti.length }}
                </span>
              </span>
            </div>
            <div class="TI_number">
              <el-row>
                <el-col :span="4" v-for="item in ti" :key="item.tixu">
                  <div
                    class="TIClass"
                    @click="changeTi(item)"
                    :style="item.type"
                  >
                    {{ item.tixu }}
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <!-- <div style="height:80px;width:100%">
         </div> -->
        <div class="Ti_foot" v-if="!disabled">
          <div class="tICade">
            <div class="TIClass" style="background: #eee"></div>
            <span>未答题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #f5a623"></div>
            <span>已答题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #175dff"></div>
            <span>当前题</span>
          </div>
        </div>
        <div class="Ti_foot" v-else>
          <div class="tICade">
            <div class="TIClass" style="background: #eee"></div>
            <span>未答题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #7ed321"></div>
            <span>正确题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #f33e34"></div>
            <span>错误题</span>
          </div>
        </div>
      </div>
      <div class="big_box_right">
        <div class="Ti_title">
          <span>{{ Current.qtype }}题</span>
        </div>
        <div class="Ti_content">
          <div class="Ti_Gan">
            <span style="display: inline-block; width: 98%; margin-bottom: 20px"
              >{{ Current.qtype == "案例" ? "案例 : " : Current.name + "、"
              }}{{ Current.stem }}</span
            >
            <div style="display: inline-block" v-if="Current.stem_img">
              <el-image
                style="width: 60%"
                :src="Current.stem_img"
                :preview-src-list="[Current.stem_img]"
              >
              </el-image>
            </div>
            <div
              class="Collection"
              @click="CollectionBoxClick"
              v-if="
                jrType == 'ctsj' || jrType == 'scsj'
                  ? jrType == 'scsj'
                    ? false
                    : !disabled
                  : usererror
                  ? !usererror
                  : !disabled
              "
            >
              <i
                class="el-icon-star-on"
                v-if="isYes"
                @click="CollectionClick(Current)"
              ></i>
              <i
                class="el-icon-star-off"
                v-else
                @click="CollectionClick(Current)"
              ></i>
            </div>
            <div
              class="Collection"
              style="top: 40px; right: -10px"
              v-if="jrType == 'ctsj' || usererror == '错题集'"
            >
              <el-tooltip
                class="item"
                effect="dark"
                content="移出错题库"
                placement="top"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  style="font-size: 18px !important; height: auto !important"
                  @click="delerror(Current)"
                ></el-button>
              </el-tooltip>
            </div>
            <div
              class="Collection"
              style="top: 40px; right: -10px"
              v-if="jrType == 'scsj' || usererror == '收藏'"
            >
              <el-tooltip
                class="item"
                effect="dark"
                content="移出收藏"
                placement="top"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  style="font-size: 18px !important; height: auto !important"
                  @click="delSc(Current)"
                ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div>
            <el-radio-group
              v-model="daan"
              class="radio-group-box"
              @change="danChange(Current)"
              v-if="Current.qtype == '单选'"
              :disabled="disabled"
            >
              <div
                class="radio_box"
                v-for="(item, index) in Current.tiList"
                :key="index"
              >
                <el-radio
                  class="arrse"
                  :label="item.cred"
                  v-if="item.content_img"
                  >{{ item.cred }} <img :src="item.content_img"
                /></el-radio>
                <el-radio
                  class="arrse"
                  :label="item.cred"
                  v-else-if="item.content"
                  >{{ item.cred }} {{ item.content }}</el-radio
                >
              </div>
            </el-radio-group>
            <el-checkbox-group
              class="radio-group-box"
              v-if="Current.qtype == '多选'"
              v-model="checkList"
              @change="danChange(Current)"
              :disabled="disabled"
            >
              <div
                class="radio_box"
                v-for="(item, index) in Current.tiList"
                :key="index"
              >
                <el-checkbox
                  class="arrse"
                  :label="item.cred"
                  v-if="item.content"
                  >{{ item.cred }} {{ item.content }}</el-checkbox
                >
              </div>
            </el-checkbox-group>
            <el-radio-group
              v-model="daan"
              class="radio-group-box"
              @change="danChange(Current)"
              v-if="Current.qtype == '判断'"
              :disabled="disabled"
            >
              <div class="radio_box">
                <el-radio class="arrse" label="正确">正确</el-radio>
              </div>
              <div class="radio_box">
                <el-radio class="arrse" label="错误">错误</el-radio>
              </div>
            </el-radio-group>
            <div v-if="Current.qtype == '案例'" class="anliBox">
              <div
                v-for="(itemS, index) in Current.children"
                :key="itemS.id"
                v-show="!itemS.noerror"
              >
                <span
                  style="display: inline-block; width: 98%; margin-bottom: 20px"
                  >{{ index + 1 }}、{{ itemS.stem }}</span
                >
                <div>
                  <el-radio-group
                    v-model="itemS.uanswer"
                    class="radio-group-box"
                    @change="danChange(itemS)"
                    v-if="itemS.qtype == '单选'"
                    :disabled="disabled"
                  >
                    <div
                      class="radio_box"
                      v-for="(item, index) in itemS.childrenti"
                      :key="index"
                    >
                      <el-radio
                        class="arrse"
                        :label="item.cred"
                        v-if="item.content_img"
                        >{{ item.cred }} <img :src="item.content_img"
                      /></el-radio>
                      <el-radio
                        class="arrse"
                        :label="item.cred"
                        v-else-if="item.content"
                        >{{ item.cred }} {{ item.content }}</el-radio
                      >
                    </div>
                  </el-radio-group>
                  <el-checkbox-group
                    class="radio-group-box"
                    v-if="itemS.qtype == '多选'"
                    v-model="itemS.checkList"
                    @change="danChange(itemS)"
                    :disabled="disabled"
                  >
                    <div
                      class="radio_box"
                      v-for="(item, index) in itemS.childrenti"
                      :key="index"
                    >
                      <el-checkbox
                        class="arrse"
                        :label="item.cred"
                        v-if="item.content"
                        >{{ item.cred }} {{ item.content }}</el-checkbox
                      >
                    </div>
                  </el-checkbox-group>
                  <el-radio-group
                    v-model="itemS.uanswer"
                    class="radio-group-box"
                    @change="danChange(itemS)"
                    v-if="itemS.qtype == '判断'"
                    :disabled="disabled"
                  >
                    <div class="radio_box">
                      <el-radio class="arrse" label="正确">正确</el-radio>
                    </div>
                    <div class="radio_box">
                      <el-radio class="arrse" label="错误">错误</el-radio>
                    </div>
                  </el-radio-group>
                </div>
                <div
                  class="daan_box"
                  style="margin-top: 0"
                  v-if="isDaAn && isDaAnShow"
                >
                  <span> 第{{ index + 1 }}题答案:{{ itemS.answer }} </span>
                  <p v-if="itemS.analysis">
                    第{{ index + 1 }}题解析:{{ itemS.analysis }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              margin-top: 44px;
              padding: 0 8px;
              display: flex;
              justify-content: space-between;
            "
          >
            <div style="flex-shrink: 0; width: 80%">
              <el-button
                @click="changeClick('del')"
                style="margin-right: 30px"
                type="primary"
                :disabled="updisabled"
                >上一题</el-button
              >
              <el-button
                @click="changeClick('add')"
                style="margin-right: 60px"
                type="primary"
                :disabled="downdisabled"
                >下一题</el-button
              >
              <!-- <el-button type="warning" @click="goback">退出练习</el-button> -->
              <el-button
                type="danger"
                @click="commit"
                v-if="!disabled"
                style="margin-left: 30%"
                >提交试卷</el-button
              >
              <el-button
                type="primary"
                @click="goback"
                v-else
                style="margin-left: 30%"
                >退出</el-button
              >
            </div>
            <el-button @click="backVisible = true" class="questionBack"
              >问题反馈</el-button
            >
          </div>
          <div
            class="daan_box"
            v-if="isDaAn && isDaAnShow && Current.qtype != '案例'"
          >
            <span> 答案:{{ Current.answer }} </span>
            <p v-if="Current.analysis">解析:{{ Current.analysis }}</p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="我的成绩"
      :visible="dialogVisible"
      width="30%"
      :show-close="false"
    >
      <div class="chengji">
        <el-progress
          type="circle"
          :percentage="fraction"
          :stroke-width="12"
          :format="text_progress"
          :width="150"
          :color="customColorMethod"
        >
        </el-progress>
        <div class="textStyle">
          <span :style="{ color: textColor }">{{ fraction }}</span>
          <p>考试得分</p>
        </div>
      </div>
      <ul class="ulbox">
        <li>
          <span style="color: #65bb06">{{ correct }}</span>
          <p>正确题数</p>
        </li>
        <li>
          <span style="color: #d0021b">{{ error }}</span>
          <p>错误题数</p>
        </li>
        <li>
          <span style="color: #666">{{ Unanswered }}</span>
          <p>未做题数</p>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="errorlist">查看错题</el-button>
        <el-button @click="rewinding">复卷</el-button>
        <el-button type="primary" @click="goback">回到主页</el-button>
      </span>
    </el-dialog>
    <!-- 问题反馈 -->
    <el-dialog
      title="问题反馈"
      :visible.sync="backVisible"
      width="440px"
      :before-close="handleClose"
    >
      <div>
        <el-select v-model="errorType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-input
          class="info"
          type="textarea"
          :rows="4"
          placeholder="请输入您要反馈的试题问题"
          v-model="feedbackInfo"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="backVisible = false">取 消</el-button>
        <el-button type="primary" @click="errorBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Ttitle from "./title.vue";
import router from "@/router";
import {
  mockAdd,
  mockcancelcollect,
  mockcollect,
  resetwrongAdd,
  resetwrong,
  removeWrong,
  exerdelCollect, //专项练习取消收藏
  feedbackQuestion, //问题反馈
} from "@/api/admin.js";
import {
  setTi,
  getTi,
  delTi,
  getExectSetting,
  getisphoto,
  getisfacetimemkface,
  getisfacetime,
  getapplyid,
} from "@/utils/auth.js";
export default {
  data() {
    return {
      errorType: "",
      options: ["题干缺失", "答案错误", "用户体验", "其他"],
      nowQuestion: "",
      feedbackInfo: "",
      backVisible: false,

      //#175DFF  当前
      Tistyle: {
        background: "#eee",
        color: "#000",
      }, //未答题样式
      DQTistyle: {
        background: "#175DFF",
        color: "#FFF",
      }, //当前题样式
      YDTistyle: {
        background: "#F5A623",
        color: "#FFF",
      }, //已答题题样式
      DCTistyle: {
        background: "#F33E34",
        color: "#FFF",
      }, //答错题样式
      DDTistyle: {
        background: "#7ED321",
        color: "#FFF",
      }, //答对题样式
      DQTI: {}, //当前题信息
      TIXU: 1, //题序
      daan: "A", //答题  单选
      Current: {
        //当前题展示在页面
        name: "1",
        stem: "",
        tiList: [],
        answer: "",
        analysis: "",
        id: "",
        qtype: "",
      },
      updisabled: true, //上一题 禁用标识
      downdisabled: false, //下一题禁用标识
      commitData: [], //用户答案  提交时传给后台
      isDaAn: false, //是否显示答案  默认不显示 在答题后显示
      isDaAnShow: false, //当前题是否作答
      Ti: getTi(), //所有试题
      mockid: this.$route.query.mockid, //试卷id  唯一
      // examid:this.$route.query.examid,//正式考试 试卷id  唯一
      gz: this.$route.query.gz,
      checkList: [], //多选的vuelue
      isYes: false, //默认不收藏
      Collectionlist: [], //收藏得全部试题
      subjectid: this.$route.query.subjectid, //专业id
      DXTi: [], //单选题
      MOTi: [], //单选题
      PDTi: [], //判断题
      ALTi: [], //案例题
      TiType: [], //试题题型 单选题  单选题  判断题
      getExectSettingData: JSON.parse(getExectSetting()), //取出考试配置
      dialogVisible: false, //隐藏弹出框
      textColor: "#1677FF", //进度条 文字颜色
      correct: 0, //正确题数
      error: 0, //错误题数
      Unanswered: 0, //未答题数
      fraction: 0, //最终得分
      loading: false, //等待
      isjiaojuan: true, //如果已经交卷  则为fales
      disabled: false, //复卷时禁用答题按钮
      time: 0, //当前时间

      jrType: this.$route.query.jrType, //进入方式  错题库  ctsj  收藏  scsj
      usererror: this.$route.query.usererror, //进入方式  首页错题库  收藏
    };
  },
  components: {
    Ttitle,
  },
  watch: {
    // TIXU(val){
    //     this.styleChange(val)
    // }
    // IDFOU(val){
    //   console.log(val,'11211121')
    // }
    // commitData(val){
    //   console.log(val,'345');
    // }
  },
  computed: {
    qtype: function () {
      return this.Ti[0].qtype;
    },
  },
  created() {
    // if(getisphoto()&&(getisfacetime()||getisfacetimemkface())){

    // }
    this.isDaAn = this.$route.query.daan == "显示"; //显示答案
    this.Ti.map((item, index) => {
      item.name = index + 1; //加入题序
      if (item.uanswer) {
        this.commitData.push({
          questionid: item.id,
          uanswer: item.uanswer,
          scored: item.scored,
        });
        this.TIXU = item.name;
      }
      if (item.qtype == "单选") {
        this.DXTi.push(item);
      }
      if (item.qtype == "多选") {
        this.MOTi.push(item);
      }
      if (item.qtype == "判断") {
        this.PDTi.push(item);
      }
      if (item.qtype == "案例") {
        this.ALTi.push(item);
      }
    });
    let A = true;
    let B = true;
    let C = true;
    let D = true;
    if (this.DXTi.length != 0) {
      this.DXTi.map((item, index) => {
        item.tixu = index + 1;
      });
    } else {
      A = false;
    }
    if (this.MOTi.length != 0) {
      this.MOTi.map((item, index) => {
        item.tixu = index + 1;
      });
    } else {
      B = false;
    }
    if (this.PDTi.length != 0) {
      this.PDTi.map((item, index) => {
        item.tixu = index + 1;
      });
    } else {
      C = false;
    }
    if (this.ALTi.length != 0) {
      this.ALTi.map((item, index) => {
        item.tixu = index + 1;
      });
    } else {
      D = false;
    }
    this.TiType.push(this.DXTi, this.MOTi, this.PDTi, this.ALTi);
    let sum = 1;
    this.TiType.map((item) => {
      if (item.length != 0) {
        // item[0].sum = sum++;
        let i = sum++;
        item.map((it) => {
          it.sum = i;
        });
      }
    });
    if (this.gz == "fj") {
      this.rewinding();
    }
    if (A) {
      this.DQTI = this.TiType[0][0];
    } else if (B) {
      this.DQTI = this.TiType[1][0];
    } else if (C) {
      this.DQTI = this.TiType[2][0];
    } else if (D) {
      this.DQTI = this.TiType[3][0];
    }
    this.Current.qtype = this.DQTI.qtype;
    this.styleChange(this.DQTI.tixu);
    document.addEventListener("keydown", this.returnF5Code);
    router.beforeEach((from, to, next) => {
      if (to.path == "/face") {
        this.isjiaojuan = false;
      } else {
        this.isjiaojuan = true;
      }
      next();
    });
  },
  methods: {
    handleClose() {
      this.errorType = "";
      this.backVisible = false;
    },
    //问题反馈
    errorBack() {
      if (this.feedbackInfo == "") {
        return this.$message.error("反馈内容不得为空");
      }

      let obj = JSON.parse(JSON.stringify(this.Current));

      feedbackQuestion({
        category: this.errorType,
        qtype: obj.qtype,
        question_id: obj.id,
        question_info: this.nowQuestion,
        reason: this.feedbackInfo,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("反馈成功!");
          this.backVisible = false;
          this.feedbackInfo = "";
          this.errorType = "";
        }
      });
    },
    //样式切换
    styleChange(val) {
      this.styleMap();
      if (this.Current.qtype == "单选") {
        this.DXTi.map((item) => {
          // item.type=this.Tistyle
          if (Number(item.tixu) == val) {
            item.type = this.DQTistyle;
            this.DQTI = item;
            this.funChangeTi(item);
          }
        });
      }
      if (this.Current.qtype == "多选") {
        this.MOTi.map((item) => {
          if (Number(item.tixu) == val) {
            item.type = this.DQTistyle;
            this.DQTI = item;
            this.funChangeTi(item);
          }
        });
      }
      if (this.Current.qtype == "判断") {
        this.PDTi.map((item) => {
          if (Number(item.tixu) == val) {
            item.type = this.DQTistyle;
            this.DQTI = item;
            this.funChangeTi(item);
          }
        });
      }
      if (this.Current.qtype == "案例") {
        this.ALTi.map((item) => {
          if (Number(item.tixu) == val) {
            item.type = this.DQTistyle;
            this.DQTI = item;
            this.funChangeTi(item);
          }
        });
      }
    },
    //默认样式改变
    styleMap() {
      this.Ti.map((item) => {
        item.type = this.Tistyle;
        this.commitData.map((element) => {
          if (item.id == element.questionid) {
            if (!this.disabled) {
              item.type = this.YDTistyle;
            } else {
              if (item.id == element.questionid) {
                if (Boolean(element.scored)) {
                  item.type = this.DDTistyle;
                } else {
                  item.type = this.DCTistyle;
                }
              } else {
                item.type = this.DQTistyle;
              }
            }
          }
        });
      });
    },
    //点击题号切换试题
    changeTi(item) {
      // console.log(item);
      this.Current.qtype = item.qtype;
      this.DQTI = item;
      this.TIXU = item.tixu;
      this.styleChange(item.tixu);
      this.funChangeTi(item);
      this.changeClick();
      this.$forceUpdate();
    },
    //按钮切换试题
    changeClick(data) {
      this.updisabled = false;
      this.downdisabled = false;

      if (!this.downdisabled && data == "add") {
        this.TIXU = Number(this.DQTI.tixu) + 1;
      }
      if (!this.updisabled && data == "del") {
        this.TIXU = Number(this.DQTI.tixu) - 1;
      }
      if (
        this.Current.qtype == "单选" &&
        this.DXTi.length == Number(this.TIXU)
      ) {
        this.downdisabled = true;
      }
      if (
        this.Current.qtype == "多选" &&
        this.MOTi.length == Number(this.TIXU)
      ) {
        this.downdisabled = true;
      }
      if (
        this.Current.qtype == "判断" &&
        this.PDTi.length == Number(this.TIXU)
      ) {
        this.downdisabled = true;
      }
      if (
        this.Current.qtype == "案例" &&
        this.ALTi.length == Number(this.TIXU)
      ) {
        this.downdisabled = true;
      }
      if (Number(this.TIXU) == 1) {
        this.updisabled = true;
      }
      this.styleChange(this.TIXU);
      this.$forceUpdate();
    },
    //试题信息  切换试题时  触发此函数
    funChangeTi(item) {
      this.nowQuestion = JSON.stringify(item);
      let Arr = [];
      Arr.push(
        {
          cred: "A",
          content: item.a,
          content_img: item.a_img,
        },
        {
          cred: "B",
          content: item.b,
          content_img: item.b_img,
        },
        {
          cred: "C",
          content: item.c,
          content_img: item.c_img,
        },
        {
          cred: "D",
          content: item.d,
          content_img: item.d_img,
        },
        {
          cred: "E",
          content: item.e,
          content_img: item.e_img,
        },
        {
          cred: "F",
          content: item.f,
          content_img: item.f_img,
        }
      );
      if (item.children) {
        item.children.map((el) => {
          if (!el.checkList || el.checkList.length == 0) {
            el.checkList = [];
          }
          if (!el.childrenti) {
            el.childrenti = [
              {
                cred: "A",
                content: el.a,
                content_img: el.a_img,
              },
              {
                cred: "B",
                content: el.b,
                content_img: el.b_img,
              },
              {
                cred: "C",
                content: el.c,
                content_img: el.c_img,
              },
              {
                cred: "D",
                content: el.d,
                content_img: el.d_img,
              },
              {
                cred: "E",
                content: el.e,
                content_img: el.e_img,
              },
              {
                cred: "F",
                content: el.f,
                content_img: el.f_img,
              },
            ];
          }
        });
      }
      this.Current = {
        name: item.tixu,
        stem: item.stem,
        tiList: Arr,
        answer: item.answer,
        analysis: item.analysis,
        id: item.id,
        qtype: item.qtype,
        stem_img: item.stem_img,
        children: item.children ? item.children : null,
      };
      //每次切换试题都要重新填写用户相对应的答案
      this.daan = "";
      this.checkList = [];
      // this.isDaAn=false

      this.commitData.map((ite) => {
        if (ite.questionid == item.id) {
          this.daan = ite.uanswer;
          this.checkList = ite.uanswer.split("");
        }
      });
      // console.log(item.id, this.daan);
      this.isYes = item.collected ? item.collected : false;
      this.Collectionlist.map((itemA) => {
        if (itemA.questionid == item.id) {
          this.isYes = true;
        }
      });
      if (this.isjiaojuan) {
        this.isDaAnShow = false;
        if (this.isDaAn) {
          this.commitData.map((itemA) => {
            if (itemA.questionid == item.id) {
              this.isDaAnShow = true;
            }
          });
        } else {
          this.isDaAnShow = true;
        }
      }
      this.$forceUpdate();
    },
    NowTime(data) {
      this.time = data;
    },
    //移出错题库
    delerror(row) {
      let num = 0;
      if (row.qtype == "单选") {
        num = 0;
      }
      if (row.qtype == "多选") {
        num = 1;
      }
      if (row.qtype == "判断") {
        num = 2;
      }
      // return
      removeWrong({
        subjectid: this.subjectid,
        qtype: row.qtype,
        questionid: row.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.TiType[num].map((item, index) => {
            if (item.id == row.id) {
              this.TiType[num].splice(index, 1);
            }
          });
          this.TiType[num].map((it, index) => {
            it.tixu = index + 1;
          });
          this.Ti.map((item, index) => {
            if (item.id == row.id) {
              this.Ti.splice(index, 1);
            }
          });
          if (this.Ti.length == 0) {
            this.$confirm(
              "错题已全部移出,点击'确定'按钮退出当前答题界面",
              "提示",
              {
                confirmButtonText: "确定",
                type: "warning",
                showClose: false,
                showCancelButton: false,
              }
            )
              .then(() => {
                this.goback();
              })
              .catch(() => {});
          } else {
            setTi(this.Ti);
            this.changeClick();
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //移出收藏
    async delSc(row) {
      let num = 0;
      if (row.qtype == "单选") {
        num = 0;
      }
      if (row.qtype == "多选") {
        num = 1;
      }
      if (row.qtype == "判断") {
        num = 2;
      }
      let error = "";
      // return
      await mockcancelcollect({
        subjectid: this.subjectid,
        questionid: row.id,
        applyid: getapplyid(),
      }).then((res) => {
        if (res.code == 200) {
          this.TiType[num].map((item, index) => {
            if (item.id == row.id) {
              this.TiType[num].splice(index, 1);
            }
          });
          this.TiType[num].map((it, index) => {
            it.tixu = index + 1;
          });
          this.Ti.map((item, index) => {
            if (item.id == row.id) {
              this.Ti.splice(index, 1);
            }
          });
          if (this.Ti.length == 0) {
            this.$confirm(
              "收藏试题已全部移出,点击'确定'后将退出当前答题界面",
              "提示",
              {
                confirmButtonText: "确定",
                type: "warning",
                showClose: false,
                showCancelButton: false,
              }
            )
              .then(() => {
                this.goback();
              })
              .catch(() => {});
          } else {
            setTi(this.Ti);
            this.changeClick();
          }
        } else {
          error = res.msg;
          // this.$message.error(res.msg);
        }
      });
      await exerdelCollect({
        subjectid: this.subjectid,
        questionid: row.id,
        applyid: getapplyid(),
      }).then((res) => {
        if (res.code == 200) {
          // this.$message.success(res.msg);
          this.TiType[num].map((item, index) => {
            if (item.id == row.id) {
              this.TiType[num].splice(index, 1);
            }
          });
          this.TiType[num].map((it, index) => {
            it.tixu = index + 1;
          });
          this.Ti.map((item, index) => {
            if (item.id == row.id) {
              this.Ti.splice(index, 1);
            }
          });
          if (this.Ti.length == 0) {
            this.$confirm(
              "收藏试题已全部移出,点击'确定'后将退出当前答题界面",
              "提示",
              {
                confirmButtonText: "确定",
                type: "warning",
                showClose: false,
                showCancelButton: false,
              }
            )
              .then(() => {
                this.goback();
              })
              .catch(() => {});
          } else {
            setTi(this.Ti);
            this.changeClick();
          }
        } else {
          error = res.msg;
          // this.$message.error(res.msg);
        }
      });
      // if(error){
      //   this.$message.error(error)
      //   }else{
      //     }
      this.$message.success("移出成功");
    },
    //退出
    goback() {
      if (this.usererror) {
        this.$router.push("/dashboard");
      } else {
        this.$router.push("/simulation/index");
      }
    },
    //答题时
    danChange(data) {
      console.log(data, "09090");
      let obj = JSON.parse(JSON.stringify(data));
      if (data.qtype == "多选") {
        this.daan = this.checkList.sort().join("");
      }
      let scored; //是否正确   对 1 错 0
      if (data.qtype == "判断") {
        if (obj.answer == this.daan) {
          scored = 1;
        } else {
          scored = 0;
        }
      } else {
        if (obj.answer.split("").sort().join("") == this.daan) {
          scored = 1;
        } else {
          scored = 0;
        }
      }

      // console.log(obj.answer, "and", this.daan);
      if (this.Current.qtype == "案例" && data.qtype == "多选") {
        obj.uanswer = obj.checkList.sort().join("");
      }

      // console.log(data,'333');
      if (this.Current.qtype == "案例") {
        if (data.answer == obj.uanswer) {
          scored = 1;
        } else {
          scored = 0;
        }
      }
      var isyes = false;
      this.commitData.map((item) => {
        if (this.commitData.length == 0 || item.questionid == data.id) {
          isyes = true;
          item.uanswer = this.Current.qtype == "案例" ? obj.uanswer : this.daan;
          item.scored = scored;
          item.qtype = data.qtype;
          item.pid = obj.pid ? obj.pid : null;
        }
      });
      if (!isyes) {
        this.commitData.push({
          questionid: data.id,
          uanswer: this.Current.qtype == "案例" ? obj.uanswer : this.daan,
          scored,
          qtype: data.qtype,
          pid: obj.pid ? obj.pid : null,
        });
        // this.isDaAn = true;
      }
      this.isDaAnShow = false;
      this.commitData.map((item) => {
        if (item.questionid == data.id) {
          this.isDaAnShow = true;
          // if(this.usererror=='错题集'){
          //   this.isDaAn=true
          // }
        }
      });
      this.$forceUpdate();
    },
    //阻止按键刷新
    returnF5Code(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      if (code > 111 && code < 123) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
        }
      }
    },
    formattingData(arr, group_key) {
      let map = {};
      let res = [];
      // 循环需要筛选的数组
      for (let i = 0; i < arr.length; i++) {
        let ai = arr[i];
        // 将需要筛选的属性的值作为新对象的键，并且判断是否已经存在
        if (!map[ai[group_key]]) {
          // 不存在的话就在map对象中创建一个属性的值作为键名，键值为空数组的新对象，并且把arr[i]放入
          map[ai[group_key]] = [ai];
        } else {
          // 如果已经存在就直接把arr[i]放入
          map[ai[group_key]].push(ai);
        }
      }
      // 循环后对map进行处理生成分组的数组
      // Object.keys(map).forEach((key) => {
      // res.push({
      //     [group_key]: key,
      //     list: map[key],
      // });
      // });

      return map;
    },
    //计算试题得分
    jsdf() {
      this.correct = 0;
      this.error = 0;
      let Dfen = 0; //单选做对题数
      let Pfen = 0; //判断做对题数
      let Mfen = 0; //多选做对题数
      let AfenA = 0; //案例做错题数
      let AfenZ = 0; //案例题总数
      this.fraction = "";
      // const map = new Map()
      if (this.ALTi.length != 0 && this.commitData.length != 0) {
        this.Ti.map((item) => {
          if (item.qtype == "案例") {
            AfenZ++;
            let isyes = false;
            this.formattingData(this.commitData, "pid")[item.id] &&
              this.formattingData(this.commitData, "pid")[item.id].map((el) => {
                if (!Boolean(item.scored)) {
                  isyes = true;
                }
              });
            if (isyes) {
              AfenA++;
            }
          }
        });
      }
      this.commitData.map((item) => {
        if (!item.pid) {
          if (Boolean(item.scored)) {
            this.correct++;
            if (item.uanswer == "正确" || item.uanswer == "错误") {
              Pfen++;
            } else if (item.uanswer.length > 1) {
              Mfen++;
            } else {
              Dfen++;
            }
          } else {
            this.error++;
          }
        }
      });
      let Dfens = 0;
      let Mfens = 0;
      let Pfens = 0;
      let Afens = 0;

      if (this.ALTi.length != 0) {
        Dfens = Dfen * this.getExectSettingData.试题分布.单选.分数; //单选得分
        Mfens = Mfen * this.getExectSettingData.试题分布.多选.分数; //多选得分
        Pfens = Pfen * this.getExectSettingData.试题分布.判断.分数; //判断得分
        Afens = (AfenZ - AfenA) * this.getExectSettingData.试题分布.案例.分数; //案例得分
        this.fraction = Dfens + Mfens + Pfens + Afens; //总分
        const map = new Map();
        this.Unanswered =
          this.Ti.length -
          this.commitData.filter((item) => {
            return !map.has(item.pid) && map.set(item.pid, 1);
          }).length;
        this.error += AfenA;
        this.correct = AfenZ - AfenA;
      } else {
        Dfens = Dfen * this.getExectSettingData.试题分布.单选.分数; //单选得分
        Mfens = Mfen * this.getExectSettingData.试题分布.多选.分数; //多选得分
        Pfens = Pfen * this.getExectSettingData.试题分布.判断.分数; //判断得分
        this.fraction = Dfens + Mfens + Pfens; //总分
        this.Unanswered = this.Ti.length - this.commitData.length; //未作题
      }
    },
    //commit 答题记录
    commit() {
      // return console.log(this.commitData, "00");
      // console.log(this.commitData,'444');
      // return
      let obj = {
        mockid: this.mockid,
        gz: this.gz,
      };
      let data = this.time;
      this.$confirm("确定交卷？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showClose: false,
      })
        .then(() => {
          //  Unanswered: res.data.undo,
          // correct: res.data.done-res.data.wrong,
          // error: res.data.wrong,
          // fraction:res.data.score,
          this.$forceUpdate();
          // console.log(this.usererror, 11);
          if (this.commitData.length > 0) {
            this.loading = true;
            if (this.usererror) {
              if (this.usererror == "错题集") {
                resetwrong({
                  subjectid: this.subjectid,
                  qlist: JSON.stringify(this.commitData),
                  applyid: getapplyid(),
                }).then((res) => {
                  this.loading = false;
                  if (res.code == 200) {
                    this.isjrTypescsjjiaojuan = false;
                    // this.dialogVisible = true;
                    this.jsdf();
                    this.goback();
                    // this.Unanswered = res.data.undo
                    // this.correct = res.data.done-res.data.wrong
                    // this.error = res.data.wrong
                    // this.fraction = res.data.score
                  }
                });
              } else {
                this.loading = false;
                this.isjiaojuan = false;
                this.jsdf();
                // this.dialogVisible = true;
                this.goback();
              }
            } else {
              if (this.jrType && this.jrType == "ctsj") {
                resetwrongAdd({
                  subjectid: this.subjectid,
                  qlist: JSON.stringify(this.commitData),
                }).then((res) => {
                  this.loading = false;
                  if (res.code == 200) {
                    this.isjiaojuan = false;
                    // this.dialogVisible = true;
                    this.jsdf();
                    this.goback();
                    // this.Unanswered = res.data.undo
                    // this.correct = res.data.done-res.data.wrong
                    // this.error = res.data.wrong
                    // this.fraction = res.data.score
                  }
                });
              } else if (this.mockid) {
                mockAdd(obj, {
                  mocklog: JSON.stringify(this.commitData),
                  use_time: data,
                }).then((res) => {
                  this.loading = false;
                  if (res.code == 200) {
                    this.isjiaojuan = false;
                    this.dialogVisible = true;
                    this.Unanswered = res.data.undo;
                    this.correct = res.data.done - res.data.wrong;
                    this.error = res.data.wrong;
                    this.fraction = res.data.score;
                  }
                });
              } else {
                // console.log(11111);
                this.loading = false;
                this.isjiaojuan = false;
                // this.dialogVisible = true;
                this.goback();
                this.jsdf();
              }
            }
          } else {
            this.loading = false;
            this.jsdf();
            this.isjiaojuan = false;
            if (!this.usererror) {
              this.dialogVisible = true;
            } else {
              this.goback();
            }
          }
        })
        .catch(() => {});
    },
    //退出当前页面 提交答题记录
    commitPage(data) {
      if (this.commitData.length > 0) {
        let obj = {
          mockid: this.mockid,
          gz: this.gz,
        };
        if (this.usererror) {
          if (this.usererror == "错题集") {
            resetwrong({
              subjectid: this.subjectid,
              qlist: JSON.stringify(this.commitData),
              applyid: getapplyid(),
            }).then((res) => {});
          }
        } else {
          if (this.jrType && this.jrType == "ctsj") {
            resetwrongAdd({
              subjectid: this.subjectid,
              qlist: JSON.stringify(this.commitData),
            }).then((res) => {});
          } else if (this.mockid) {
            mockAdd(obj, {
              mocklog: JSON.stringify(this.commitData),
              use_time: data,
            }).then((res) => {});
          } else {
            this.isjiaojuan = false;
            this.dialogVisible = true;
          }
        }
      }
    },
    //收藏 取消收藏
    CollectionClick(data) {
      var isyes = false;
      this.Collectionlist.map((item, index) => {
        if (this.Collectionlist.length == 0 || item.questionid == data.id) {
          isyes = true;
          delete this.Collectionlist[index];
          mockcancelcollect({
            subjectid: this.subjectid,
            questionid: data.id,
            applyid: getapplyid(),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("取消成功");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
      if (!isyes) {
        this.Collectionlist.push({ questionid: data.id, isYes: true });
        mockcollect({
          subjectid: this.subjectid,
          questionid: data.id,
          applyid: getapplyid(),
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("收藏成功");
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    //收藏控制器
    CollectionBoxClick() {
      this.isYes = !this.isYes;
    },
    //环形进度条 内置文字
    text_progress(percentage) {},
    //环形进度条 颜色调整
    customColorMethod(percentage) {
      if (percentage <= 50) {
        this.textColor = "#f56c6c";
        return "#f56c6c";
      } else if (percentage <= 80) {
        this.textColor = "#e6a23c";
        return "#e6a23c";
      } else {
        this.textColor = "#409eff";
        return "#409eff";
      }
    },
    //复卷
    rewinding() {
      this.dialogVisible = false;
      this.disabled = true;
      this.isDaAn = true;
      this.isjiaojuan = false;
      this.isDaAnShow = true;
      // this.styleMap()
      // console.log(1111, this.commitData);
      this.daan = this.commitData.uanswer;
      this.styleChange(this.TiType[0][0].tixu);
    },
    //查看错题
    errorlist() {
      if (this.commitData.length == 0) {
        return this.$message.error("没有错题");
      }

      let DXTi = [];
      let MOTi = [];
      let PDTi = [];
      let ALTi = [];
      this.commitData
        .filter((item) => {
          return !Boolean(item.scored);
        })
        .map((item, index) => {
          if (item.pid) {
            this.Ti.map((it) => {
              if (it.id == item.pid) {
                let isY = true;
                ALTi.map((el) => {
                  if (it.id == el.id) {
                    isY = false;
                  }
                });
                if (it.children) {
                  it.children.map((el) => {
                    if (el.id == item.questionid) {
                      if (el.qtype != "多选") {
                        el.uanswer = item.uanswer;
                      } else {
                        el.checkList = item.uanswer.split("");
                      }
                    }
                    el.noerror = false;
                    if (el.uanswer == el.answer) {
                      el.noerror = true;
                    }
                  });
                }
                if (isY) {
                  // it.name = index + 1; //加入题序
                  // this.Ti.push(it);
                  if (it.qtype == "案例") {
                    ALTi.push(it);
                  }
                }
              }
            });
          } else {
            this.Ti.map((it) => {
              if (it.id == item.questionid) {
                // it.tixu = index+1 //加入题序
                if (it.qtype == "单选") {
                  DXTi.push(it);
                }
                if (it.qtype == "多选") {
                  MOTi.push(it);
                }
                if (it.qtype == "判断") {
                  PDTi.push(it);
                }
                // if (it.qtype == "案例") {
                //   ALTi.push(it);
                // }
              }
            });
          }
        });
      let A = true;
      let B = true;
      let C = true;
      let D = true;
      if (DXTi.length != 0) {
        DXTi.map((item, index) => {
          item.tixu = index + 1;
        });
      } else {
        A = false;
      }
      if (MOTi.length != 0) {
        MOTi.map((item, index) => {
          item.tixu = index + 1;
        });
      } else {
        B = false;
      }
      if (PDTi.length != 0) {
        PDTi.map((item, index) => {
          item.tixu = index + 1;
        });
      } else {
        C = false;
      }
      if (ALTi.length != 0) {
        ALTi.map((item, index) => {
          item.tixu = index + 1;
        });
      } else {
        D = false;
      }
      if (
        PDTi.length == 0 &&
        MOTi.length == 0 &&
        DXTi.length == 0 &&
        ALTi.length == 0
      ) {
        return this.$message.error("没有错题");
      }
      this.DXTi = DXTi;
      this.MOTi = MOTi;
      this.PDTi = PDTi;
      this.ALTi = ALTi;
      this.TiType = [];
      this.TiType.push(this.DXTi, this.MOTi, this.PDTi, this.ALTi);
      let sum = 1;
      this.TiType.map((item) => {
        if (item.length != 0) {
          item[0].sum = sum++;
        }
      });
      this.dialogVisible = false;
      this.disabled = true;
      this.isDaAn = true;
      this.isjiaojuan = false;
      // this.styleMap()
      if (A) {
        this.styleChange(this.TiType[0][0].tixu);
      } else if (B) {
        this.styleChange(this.TiType[1][0].tixu);
      } else if (C) {
        this.styleChange(this.TiType[2][0].tixu);
      }
    },
  },
  beforeDestroy() {
    // this.commit(this.commitData)
    document.removeEventListener("keydown", this.returnF5Code);
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-select {
    width: 100% !important;
    margin-bottom: 20px;
    .el-input__inner {
      border: none;
      background: #f7f7f7;
    }
  }
  .info {
    width: 100% !important;

    .el-textarea__inner {
      resize: none;
      background: #f7f7f7;
      border: none;
    }
  }
}
.questionBack {
  color: #327bff;
  border-color: #327bff;
}
.big_box {
  width: 100%;
  height: calc(100vh - 50px);
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f8;
  padding: 24px;
  // margin-top:50px;
  .big_box_left {
    width: 370px;
    height: 100%;
    background: #fff;
    padding: 24px 0;
    position: relative;
    // overflow: auto;
    .TI_title {
      font-weight: 600;
      display: inline-block;
      // width: 50px;
      span {
        font-weight: 400;
      }
    }
    .Ti_foot {
      position: absolute;
      bottom: 0;
      height: 80px;
      width: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tICade {
        display: flex;
        align-items: center;
      }
      .TIClass {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
  }
  .big_box_right {
    flex: 1;
    height: 100%;
    background: #fff;
    margin-left: 24px;
    .Ti_title {
      width: 100%;
      display: flex;
      justify-content: center;
      span {
        display: flex;
        padding: 24px;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .Ti_content {
      // width: 100%;
      padding: 0 50px;
      font-size: 26px;
      .Ti_Gan {
        // margin-bottom: 32px;
        position: relative;
        .Collection {
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
          .el-icon-star-on:before {
            color: #f5a623;
          }
        }
      }
      .radio-group-box {
        padding: 0 20px;
      }
      .radio_box {
        font-size: 20px;
        padding-bottom: 16px;
        ::v-deep {
          .arrse {
            width: 65vw;
            .el-radio__label,
            .el-checkbox__label {
              font-size: 20px !important;
              word-break: break-all !important;
              white-space: normal !important;
            }
            .el-checkbox__input.is-disabled + span.el-checkbox__label {
              color: #333;
            }
            .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
              background-color: #1890ff !important;
              border-color: #1890ff !important;
              &::after {
                border-color: #ffffff !important;
              }
            }
          }
          .el-radio__inner {
            width: 20px;
            height: 20px;
            &::after {
              width: 8px;
              height: 8px;
            }
          }
          .el-checkbox__inner {
            width: 20px;
            height: 20px;
            &::after {
              width: 5px;
              height: 9px;
              left: 6px;
            }
          }
          .el-radio__input {
            margin-top: -5px;
          }
        }
      }
      .daan_box {
        margin-top: 50px;
        padding: 20px 36px;
        background: #eeeeee;
        span {
          font-size: 18px;
        }
        p {
          margin: 0;
          font-size: 18px;
        }
      }
    }
  }
}
.button_color {
  background: #eee;
  // color:#fff;
}
.TI_number {
  padding: 0 24px;
  padding-top: 10px;
  // overflow: hidden;
  // max-height:calc(100% - 100px);
  .TIClass {
    width: 40px;
    height: 40px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
  }
}
::v-deep {
  :root {
    min-height: 680px;
  }
  .is-disabled + span.el-radio__label {
    color: #333;
  }
  .is-disabled .el-radio__inner {
    border-color: #dcdfe6 !important;
    background-color: #ffffff !important;
    &::after {
      background-color: #ffffff !important;
    }
  }
  .is-disabled .is-checked .el-radio__inner {
    background-color: #1890ff !important;
    border-color: #1890ff !important;
  }
}
.chengji {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  .textStyle {
    height: 150px;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    span {
      color: #1677ff;
      font-size: 36px;
    }
    p {
      color: #999999;
      font-size: 14px;
    }
  }
}
.ulbox {
  padding: 30px 57px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  li {
    text-align: center;
    line-height: 34px;
    span {
      font-size: 18px;
    }
    p {
      font-size: 18px;
      color: #999;
    }
  }
}
.anliBox {
  max-height: 420px;
  overflow: auto;
}
</style>
